<template>
	<view>
		<wrapBgImgVue
			bgImg="goods/goods_top.png"
		/>
		
		<navigationBarVue
			:bgImgType="1"
			navigationTitle="订单管理"
			@onTotalHeight="onTotalHeight"
		>
			<view class="wrap-status-bg flex">
				<block v-for="(item, index) in tab_list" :key="index">
					<view class="status-item flex align-center just-center"
						:class="item.status === status ? 'active': ''"
						@click.stop="onTab(item)"
					>
						{{ item.title }}
						
						<image
							class="tab-line"
							v-if="item.status === status"
							:src="$staticImagePath('goods/tab_lines.png')"
						/>
					</view>
				</block>
			</view>
		</navigationBarVue>
		
		<view class="wrap safe-area"
			:style="'padding-top: calc(' + (topHeight + 10) + 'px) !important;'"
		>
			<view class="wrap-list flex column">
				<block v-for="(item, index) in list" :key="index">
					<view class="item" @click="onDetails(item)">
						<view class="num-status flex align-center just-between">
							<view class="num limit-num-line">
								编号：{{ item.order_no }}
							</view>
							
							<view class="status">
								{{ onGetStatus(item) }}
							</view>
						</view>
						
						<view class="wrap-goods-list">
							<block v-for="(subItem, idx) in item.ordergoods" :key="idx">
								<view class="goods-info flex align-center">
									<view class="file">
										<image class="img" :src="$wanlshop.oss(subItem.image)" />
									</view>
									
									<view class="right flex column just-between">
										<view class="goods-name limit-num-line">
											{{ subItem.title }}
										</view>
										
										<view class="price-num flex align-center just-between">
											<view class="price">
												￥{{ subItem.price }}
											</view>
											
											<view class="num">
												x{{ subItem.number }}
											</view>
										</view>
									</view>
								</view>
							</block>
						</view>
						
						<view class="wrap-goods-price flex align-center just-end">
							实付款:￥{{ item.pay.actual_payment }}
						</view>
						
						<view class="wrap-btn-bg flex align-center just-end" v-if="onShowBtnBg(item)">
							<block v-if="item.is_refund == 1">
								<view class="btn one" @click.stop="onRefuseRefund(item)">
									拒绝
								</view>
								
								<view class="btn two" @click.stop="onAgreeRefund(item)">
									同意
								</view>
							</block>
							
							<block v-else>
								<view class="btn one"
									v-if="item.state == 2"
									@click.stop="onRefund(item)"
								>
									退款
								</view>
								
								<view v-if="item.delivery_type === 'express' && item.state == 2" class="btn two"
									@click.stop="onSend(item)"
								>
									发货
								</view>
							</block>
						</view>
					</view>
				</block>
			</view>
			
			<wanl-empty v-if="list.length === 0" text="暂无数据" />
		</view>
		
		<refuseRefundPopupVue
			:isShow.sync="isShowRefusePopup"
			:orderID="orderID"
			@onRefunse="onRefresh"
		/>
	</view>
</template>

<script>
	import { ShopOrderNoun, AgreeAfterService } from "@/utils/API.js";
	import navigationBarVue from "../components/navigationBar/navigationBar.vue";
	import wrapBgImgVue from "../components/navigationBar/bgImg.vue";
	import refuseRefundPopupVue from "../components/popupContent/refuseRefundPopup.vue";
	
	export default {
		components: {
			navigationBarVue,
			wrapBgImgVue,
			refuseRefundPopupVue,
		},
		data() {
			return {
				topHeight: 0, //顶部高度
				tab_list: [
					{ title: "全部", status: "0" },
					{ title: "待付款", status: "-1" },
					{ title: "待发货", status: "1" },
					{ title: "待核销", status: "6" },
					{ title: "待售后", status: "3" },
					{ title: "已评价", status: "5" },
				],
				status: "0",
				
				page: 1,
				total: 0,
				list: [],
				
				orderID: "", //订单号
				isShowRefusePopup: false,
			}
		},
		onLoad(options) {
			this.onRefresh();
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},
		methods: {
			/**
			 * 顶部高度
			 */
			onTotalHeight(height) {
				this.topHeight = height;
			},
			/**
			 * 切换
			 */
			onTab(item) {
				if (this.status === item.status) {
					return;
				}
				this.status = item.status;
				this.onRefresh();
			},
			/**
			 * 获取订单状态
			 */
			onGetStatus(item) {
				var text = "";
				
				var twoText = "";
				if (item.delivery_type === "express") {
					twoText = "待发货";
				} else if (item.delivery_type === "pickup") {
					twoText = "待核销";
				}
				
				if (item.is_refund == 1) {
					text = "待售后"
				} else {
					if (item.state == -1) {
						text = "待付款"
					} else {
						text = ["", "待付款", twoText, "待收货", "待评论", "", "已完成", "已取消", "", "", "", ""][item.state];
					}
				}
				return text;
			},
			/**
			 * 是否显示按钮
			 */
			onShowBtnBg(item) {
				var isShow = false;
				
				if (item.state == 2) {
					isShow = true;
				}
				if (item.is_refund == 1) {
					isShow = true;
				}
				
				return isShow;
			},
			/**
			 * 退款
			 */
			onRefund(item) {
				this.$wanlshop.to(`/pages/new/applyRefund/applyRefund?id=${item.id}`);
			},
			/**
			 * 发货
			 */
			onSend(item) {
				this.$wanlshop.to(`/pages/new/sendGoods/sendGoods?id=${item.id}`);
			},
			/**
			 * 同意
			 */
			onAgreeRefund(item) {
				uni.showModal({
					title: "提示",
					content: "确定同意售后吗?",
					success: res => {
						if (res.confirm) {
							this.agreeRefundData(item.refund.id);
						}
					}
				})
			},
			agreeRefundData(orderID) {
				this.$throttle(() => {
					AgreeAfterService(orderID).then(res => {
						this.$st.success("售后成功", () => {
							this.onRefresh();
						})
					})
				})
			},
			/**
			 * 拒绝
			 */
			onRefuseRefund(item) {
				this.orderID = item.refund.id;
				this.isShowRefusePopup = true;
			},
			/**
			 * 详情
			 */
			onDetails(item) {
				this.$wanlshop.to(`/pages/new/shopOrderDetails/shopOrderDetails?id=${item.id}`);
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.list = [];
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				ShopOrderNoun({
					page: this.page,
					state: this.status,
				}).then(res => {
					this.total = res.data.total;
					const list = res.data.data;
					if (this.page == 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.wrap-status-bg {
		width: 100%;
		overflow: hidden;
		height: 100rpx;
		
		.status-item {
			flex: 1;
			overflow: hidden;
			font-size: 30rpx;
			color: #333333;
			position: relative;
		}
		.active {
			color: #84BD00 !important;
			font-weight: bold;
		}
		
		.tab-line {
			position: absolute;
			left: 50%;
			bottom: 10rpx;
			transform: translateX(-50%);
			width: 34rpx;
			height: 17rpx;
			overflow: hidden;
		}
	}
	
	.wrap {
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		
		.wrap-list {
			width: 100%;
			overflow: hidden;
			gap: 30rpx;
			
			.item {
				width: 100%;
				overflow: hidden;
				padding: 0rpx 30rpx 40rpx;
				box-sizing: border-box;
				background-color: white;
				border-radius: 16rpx;
				overflow: hidden;
				
				.num-status {
					width: 100%;
					padding: 30rpx 0rpx;
					overflow: hidden;
					border-bottom: 2rpx solid #DBDBDB;
					gap: 20rpx;
					
					.num {
						--limit-num: 1;
						flex: 1;
						overflow: hidden;
						color: #333333;
						font-size: 26rpx;
					}
					
					.status {
						color: #84BD00;
						font-size: 26rpx;
					}
				}
				
				.wrap-goods-list {
					width: 100%;
					overflow: hidden;
					
					.goods-info {
						width: 100%;
						overflow: hidden;
						gap: 25rpx;
						padding: 30rpx 0rpx;
						border-bottom: 2rpx solid #DBDBDB;
						
						&:last-child {
							border-bottom: none !important;
						}
						
						.file {
							width: 130rpx;
							height: 130rpx;
							border-radius: 16rpx;
							overflow: hidden;
							
							.img {
								width: 100%;
								height: 100%;
							}
						}
						
						.right {
							flex: 1;
							height: 130rpx;
							overflow: hidden;
							
							.goods-name {
								--limit-num: 2;
								color: #333333;
								font-size: 26rpx;
							}
							
							.price-num {
								width: 100%;
								overflow: hidden;
								
								.price {
									color: #FF0000;
									font-size: 33rpx;
									font-weight: bold;
								}
								
								.num {
									color: #999999;
									font-size: 30rpx;
								}
							}
						}
					}
				}
				
				.wrap-goods-price {
					width: 100%;
					overflow: hidden;
					color: #333333;
					font-size: 26rpx;
				}
				
				.wrap-btn-bg {
					margin-top: 30rpx;
					width: 100%;
					overflow: hidden;
					gap: 20rpx;
					
					.btn {
						width: 135rpx;
						height: 52rpx;
						line-height: 52rpx;
						text-align: center;
						overflow: hidden;
						border-radius: 30rpx;
						font-size: 24rpx;
					}
					
					.one {
						color: #333333;
						border: 2rpx solid #DBDBDB;
					}
					
					.two {
						color: white;
						background-color: #84BD00;
					}
				}
			}
		}
	}
</style>